<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="content">
    <div class="header"><img @click="$router.push('/vsCode')" src="@/assets/头像.jpg" alt="">
      <div class="moyu"></div>

    </div>
    <div class="content-technology" v-for="items in list" :key="items.id">
      <roadSign :width="200" :text="items.title" :icon="items.icon" :backgroundcolor1="items.backgroundcolor1"
        :backgroundcolor2="items.backgroundcolor2" @click="$router.push(items.router)" />
      <div class="list">
        <item class="item" :title="it.title" :img="it.img"
          @click="$router.push(`/technology/?type=${it.name.type}&name=${it.name.name}`)" v-for="it in items.item"
          :key="it.id">
        </item>
      </div>
    </div>

    <div class="myfriend">
      <roadSign :width="200" text="Myfriend" icon="content-用户" backgroundcolor1="" backgroundcolor2=""
        @click="$router.push('')" />
      <a class="myfriend-item" :href="item.href" v-for="item, index in friends" :key="index">
        <img :src="item.img">
        <div class="myfriend-item-username">{{ item.username }}</div>
      </a>
    </div>


  </div>
</template>

<script setup lang="ts">
import roadSign from './roadSign/index.vue';
import item from './item/index.vue';
import { ref } from 'vue';
import type { content } from '@/types/content';
import { getMdobj } from '@/utils/glob'



const data: content[] = [
  {
    id: 1,
    item: [
      { title: 'react中的api', id: 5, img: 'https://www.matto.top/assets/images/KiOuTlCzge7JHh3.jpg', name: { type: 'technology', name: 'day01' } },
      { title: 'vue3动态添加路由', id: 6, img: 'https://www.matto.top/assets/images/Qr2ykmsEFpJn4BC.jpg', name: { type: 'technology', name: 'vue3动态添加路由' } },
      { title: '如何喔粑粑', id: 7, img: 'https://www.matto.top/assets/images/Ihj5QAZgVMqr9fJ.jpg', name: { type: 'technology', name: 'day01' } },
      { title: '如何倒立拉屎', id: 8, img: 'https://www.matto.top/assets/images/6nOYcygRGXvpsFd.jpg', name: { type: 'technology', name: 'day01' } }],
    // title: '近期技术输出',
    title: 'technology',
    backgroundcolor1: "#8c099d",
    backgroundcolor2: "#5e0569",
    icon: 'content-路标',
    router: '/archive/technology'
  },
  {
    id: 2,
    // title: '技术的自我修养',
    title: 'cultivation',
    item: [
      { title: 'react中的api', id: 9, img: 'https://www.matto.top/assets/images/KZ6jv8C92Vpwcih.jpg', name: { type: 'technology', name: 'day01' } },
      { title: '傻逼的自我修养', id: 10, img: 'https://www.matto.top/assets/images/GwJzq4SYtClRcZh.jpg', name: { type: 'technology', name: 'day01' } },
      { title: '如何喔粑粑', id: 11, img: 'https://www.matto.top/assets/images/Qr2ykmsEFpJn4BC.jpg', name: { type: 'technology', name: 'day01' } },
      { title: '如何倒立拉屎', id: 12, img: 'https://www.matto.top/assets/images/5QdwFC82gT3XPSZ.jpg', name: { type: 'technology', name: 'day01' } }],
    backgroundcolor1: "#f9cf13",
    backgroundcolor2: "#c7a60f",
    icon: 'content-编写',
    router: '/archive/cultivation'
  },
  {
    // title: '更多分享',
    title: 'share',
    id: 3,
    item: [
      { title: 'react中的api', id: 13, img: 'https://www.matto.top/assets/images/Ihj5QAZgVMqr9fJ.jpg', name: { type: 'technology', name: 'day01' } },
      { title: '傻逼的自我修养', id: 14, img: 'https://www.matto.top/assets/images/KiOuTlCzge7JHh3.jpg', name: { type: 'technology', name: 'day01' } },
      { title: '如何喔粑粑', id: 15, img: 'https://www.matto.top/assets/images/KPyTCARHBzpxJ46.jpg', name: { type: 'technology', name: 'day01' } },
      { title: '如何倒立拉屎', id: 16, img: 'https://www.matto.top/assets/images/6nOYcygRGXvpsFd.jpg', name: { type: 'technology', name: 'day01' } }],
    backgroundcolor1: "#007087",
    backgroundcolor2: "#005a6c",
    icon: 'share-更多',
    router: '/archive/share'
  }
]
const friends: any = [
  {
    href: 'http://boomsun11.web3v.work',
    username: '徒儿的笔记',
    img: 'https://cdn.jsdelivr.net/gh/Innei/static@master/avatar.png'
  }, {
    href: '',
    username: '一方の笔记',
    img: 'https://cdn.jsdelivr.net/gh/Innei/static@master/avatar.png'
  }, {
    href: '',
    username: '一方の笔记',
    img: 'https://cdn.jsdelivr.net/gh/Innei/static@master/avatar.png'
  },
]
const Mdobj = getMdobj()
//将在文件里面获取md的文件名字赋值给title
data.forEach(item => {
  for (let key in Mdobj) {
    if (item.title === key) {
      Mdobj[key].name.forEach((obj: string, index: number) => {
        if (index < 4) {
          //赋值title
          item.item[index].title = obj
          //赋值文件夹名
          item.item[index].name.type = key
          //赋值文件名前半部分(可以去我markdown文件看下文件名)
          item.item[index].name.name = obj
        }

      })
      Mdobj[key].time.forEach((obj: string, index: number) => {
        if (index < 4) {
          //赋值文件名后半部分
          item.item[index].name.name += '_' + obj
        }

      })
    }
  }
})








const list = ref(data)



</script>

<style scoped lang="scss">
.content {
  margin-top: 100px;
  padding-bottom: 100px;
  max-width: 1400px;
  min-width: 375px;
  width: 70%;
  height: 100vh;
  overflow: auto;
  color: #ffe7d0 !important;

  &::-webkit-scrollbar {
    display: none;
  }


  .header {
    height: 150px;

    .moyu {
      display: inline-block;
      width: 150px;
      height: 80px;
      background: url('@/assets/摸鱼.png') no-repeat center center;
      background-size: 150px auto;
    }

    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.8);
      opacity: .8;
      margin: 0 30px;
      animation: imgr 3s linear infinite;

    }


  }


  .content-technology {
    margin-bottom: 60px;

    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // flex-wrap: wrap;
      margin: 20px 0;
      flex-wrap: wrap;
    }

  }

  .myfriend {


    .myfriend-item {
      margin-top: 20px;
      width: 80px;
      text-align: center;
      color: aquamarine;
      display: inline-block;
      margin: 20px;

      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-bottom: 5px;
      }

      .myfriend-item-username {
        text-align: center;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

      }
    }
  }
}

@keyframes imgr {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);

  }
}
</style>